<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	pageContext.setAttribute("path", path);
	pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册/登陆</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Wedding Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>	
<!-- /start menu -->
</head>
<body> 
	<jsp:include page="../common/header.jsp"></jsp:include>
<!---->
<div class="container">
	  <ol class="breadcrumb">
		  <jsp:include page="../common/first.jsp"></jsp:include>
		  <li class="active">注册和登陆</li>
	  </ol>
	 <div class="registration">
		 <div class="registration_left">
			 <h2>新用户? <span> 注册个账号吧 </span></h2>
			 <!-- [if IE] 
				< link rel='stylesheet' type='text/css' href='ie.css'/>  
			 [endif] -->  
			  
			 <!-- [if lt IE 7]>  
				< link rel='stylesheet' type='text/css' href='ie6.css'/>  
			 <! [endif] -->  
			 <script>
				
				//发送短信验证码
				function sendMobileCode(val) {
					//首先判断选中的是家教还是家长
					var choose="";
					var arr = document.getElementsByName("choose");
					for(var i=0,n=arr.length;i<n;i++){
						if(arr[i].checked==true){//得到选中的单选按钮如果要得到值 那么可以：
							choose = arr[i].value;//弹出选中单选按钮的值
							break;
						}
					}
					//获取手机号，然后判断是否满足格式
			        var tel = $("#tel").val();
			        var pattern = /^[1][3,4,5,7,8][0-9]{9}$/;
			        if (pattern.test(tel)) {
			        	//首先判断手机号是否已经被注册
			        	$.post("login/existTel",{tel:tel,choose:choose},function(data){
			        		if (!data.meta.success) {
			        			alert(data.meta.message);
			        			$("#register-submit").attr("disabled",true);
			        		}else{
			        			//发送验证码，并将随即生成的验证码作为正则判断
					        	$.post("login/sendMobileCode",{tel:tel},function(data){
							        $("#code").attr("pattern",data);
							        $("#register-submit").attr("disabled",false);
							    });
					        	settime(val);
			        		}
					    });
			        }else {
			        	alert("请输入正确格式的手机号！");
			        }
				}
				//验证码60s后重新发送
				countdown = 59;
				function settime(val) {
					if (countdown == 0) {
						val.removeAttribute("disabled");
						val.value = "获取验证码";
						countdown = 60;
					} else {
						val.setAttribute("disabled", true);
						val.value = "重新发送(" + countdown + ")";
						countdown--;
						setTimeout(function() {
							settime(val)
						}, 1000)
					}
				}
				//确认密码,当第一次密码输入，失去焦点后，将确认密码框的pattern，设置为第一次输入的密码
				function rpassword(val) {
					$("#surePassword").attr("pattern",val.value);
				}
					
				$(function(){
					var message = $("#message").val();
					if (message != null && message != "") {
						alert(message);
						$("#message").val("");
					}
				})
			 </script>
			 <div class="registration_form">
			 <!-- Form -->
			 	<input type="hidden" id="message" value="${message }">
				<form id="registration_form" action="login/register" method="post">
					<div class="sky_form1">
						<ul>
							<li><label class="radio left"><input type="radio" name="choose" checked="checked" value="teacher"><i></i>家教</label></li>
							<li><label class="radio"><input type="radio" name="choose" value="patriarch"><i></i>家长</label></li>
							<div class="clearfix"></div>
						</ul>
					</div>	
					<div>
						<label>
							<input placeholder="手机号:" id="tel" name="tel" type="text" pattern="^[1][3,4,5,7,8][0-9]{9}$" tabindex="1" required  autofocus>
						</label>
					</div>
					<div>
						<label>
							<input placeholder="验证码:" id="code" type="text" pattern="11111" maxlength="4" tabindex="2" required autofocus>
						</label>
					</div>
					<div>
						<label>
							<input placeholder="密码" id="password" name="password" type="password" onblur="rpassword(this)" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$" required>
						</label>
					</div>						
					<div>
						<label>
							<input placeholder="确认密码" id="surePassword" type="password" required>
						</label>
					</div>	
					<div>
						<input type="button" value="获取验证码" id="register-code" onclick="sendMobileCode(this)">
						<input type="submit" value="注册" id="register-submit" style="float:right">
					</div>
				</form>
				<!-- /Form -->
			 </div>
		 </div>
		 <div class="registration_left">
			 <h2>登陆</h2>
			 <div class="registration_form">
			 <!-- Form -->
				<form  action="login/login" method="post">
					<div class="sky_form1">
						<ul>
							<li><label class="radio left"><input type="radio" name="choose" checked="checked" value="teacher"><i></i>家教</label></li>
							<li><label class="radio"><input type="radio" name="choose" value="patriarch"><i></i>家长</label></li>
							<div class="clearfix"></div>
						</ul>
					</div>	
					<div>
						<label>
							<input placeholder="手机号或者账号登陆" name="account" type="text" required>
						</label>
					</div>
					<div>
						<label>
							<input placeholder="密码" name="password" type="password" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$" required>
						</label>
					</div>						
					<div>
						<input type="submit" value="登陆" id="login-submit" style="float:right">
					</div>
				</form>
			 <!-- /Form -->
			 </div>
		 </div>
		 <div class="clearfix"></div>
	 </div>
</div>
<!--footer-->
<jsp:include page="../common/footer.jsp"></jsp:include>	 
</body>
</html>